<template>
  <FrontSideTreeTable
    treeDataUrl="/param/memberType/getPositionPartsTree"
    tableDataUrl="/param/memberType/getMemberTypeList"
    addUrl="/param/memberType/add"
    editUrl="/param/memberType/edit"
    deleteUrl="/param/memberType/delete"
    treeTitle="部件"
    :tableTitle="selectedNode.name+'构件列表'"
    :tableProps="tableProps"
    :columns="columns"
    searchHint="根据构件名称或编号方式查询"
    :searchProps="searchProps"
    :form="form"
    :rules="rules"
    :loadingForm="loadingForm"
    @onNodeClick="handleNodeClick"
    @beforeAdd="beforeAdd"
    @beforeEdit="beforeEdit"
    @onTreeCreated="handleTreeCreated"
    @onTableCreated="handleTableCreated">

    <template slot="afterColumns">
      <el-table-column
        align="center"
        prop="memberDescName"
        column-key="memberDescId"
        label="编号方式"
        :filters="memberDescFilters"
        filter-placement="bottom">
      </el-table-column>
    </template>

    <!--表单-->
    <template slot="form">
      <el-form-item label="所属部件" prop="partsTypeId">
        <el-select v-model="form.partsTypeId" style="width:100%" placeholder="选择所属部件" filterable>
          <el-option-group v-for="group of partsTypes" :key="group.id" :label="group.name">
            <el-option v-for="item of group.children" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="构件名称" prop="name">
        <el-input v-model="form.name" placeholder="输入构件名称"></el-input>
      </el-form-item>
      <el-form-item label="描述类型" prop="memberDescId">
        <el-select v-model="form.memberDescId" style="width:100%" placeholder="选择描述类型" filterable>
          <el-option v-for="item of memberDescList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="顺序号" prop="sortNo">
        <el-input type="number" v-model.number="form.sortNo" placeholder="输入顺序号"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.notes"></el-input>
      </el-form-item>
    </template>

  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"
  import {intValidator} from "../../../assets/js/utils/ValidateUtils"
  import {doGet} from "../../../assets/js/utils/RequestUtils"
  import {childrenArrayOf} from "../../../assets/js/utils/TreeUtils"

  /** 用于重复性判断 */
  let oldName = "";

  const MEMBER_DESC_URL = "/param/memberType/getMemberDescList";

  export default {
    name:"MemberTypeMaintenance",
    data() {
      //名称校验器
      let nameValidator = (rule, value, callback)=>{
        if(oldName === value) {
          callback();
        } else if(this.tableData.some(item=>item.partsTypeId === this.form.partsTypeId && item.name === value)) {
          callback(new Error("构件重复"));
        } else {
          callback();
        }
      };

      return {
        treeData:[],
        tableData:[],
        memberDescList:[],
        tableProps:{
          parentId:"partsTypeId"
        },
        columns:[
          {prop:"sortNo", label:"顺序号", sortable:"custom", width:"100"},
          {prop:"name", label:"构件名称"}
        ],
        searchProps:["name", "memberDescName"],
        form:{
          name:"",
          partsTypeId:"",
          memberDescId:"",
          notes:"",
          sortNo:0
        },
        loadingForm:false,
        rules:{
          partsTypeId:[
            {required:true, message:"请选择部件类型", trigger:"blur"},
          ],
          name:[
            {required:true, message:"请输入构件名称", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ],
          memberDescId:[
            {required:true, message:"请选择构件编号方式", trigger:"blur"}
          ],
          sortNo:[
            {validator:intValidator, trigger:"blur"}
          ]
        },
        selectedNode:{id:"", name:""},
        memberDescFilters:[]
      }
    },
    computed:{
      partsTypes() {
        let result = [];
        //取出父节点
        let parentNodes = this.treeData.filter(item => !item.parentId);
        let childNodes = this.treeData.filter(item => !!item.parentId);
        //拼接子节点
        parentNodes.forEach(pNode => result.push({children: childrenArrayOf(pNode, childNodes), ...pNode}));
        return result;
      }
    },
    methods:{
      handleTreeCreated(data) {
        this.treeData = data;
      },
      handleTableCreated(data) {
        this.tableData = data;
      },
      handleNodeClick(data) {
        this.selectedNode = data;
      },
      beforeAdd() {
        oldName = "";
        clearFields(this.form);
        //获取选中的默认值
        if(Array.isArray(this.partsTypes) && this.partsTypes.every(item=>item.id !== this.selectedNode.id)) {
          this.form = {name:"", partsTypeId:this.selectedNode.id, memberDescId:"", notes:""}
        }
      },
      beforeEdit(data){
        oldName = data.name;
        this.form = {...data};
      },
      fetchMemberDesc() {
        this.loadingForm = true;
        doGet(MEMBER_DESC_URL, {component:this})
          .then(response=>{
            this.memberDescList = response;
            this.memberDescFilters = this.memberDescList.map(item => {
              return {
                text: item.name,
                value: item.id
              }
            });
          })
          .finally(()=>this.loadingForm = false);
      }
    },
    activated() {
      this.fetchMemberDesc();
    },
    components:{FrontSideTreeTable}
  }
</script>



// WEBPACK FOOTER //
// MemberTypeMaintenance.vue?d350108c